<template>
    <div class="mui-content carBrandList">
        <div id='list' class="mui-indexed-list">
            <div class="mui-indexed-list-search mui-input-row mui-search" style="display:none">
                <input type="search" class="brand-search mui-input-clear mui-indexed-list-search-input" placeholder="搜索汽车品牌">
            </div>
            <div class="mui-indexed-list-bar">
                <a>A</a>
                <a>B</a>
                <a>C</a>
                <a>D</a>
                <a>E</a>
                <a>F</a>
                <a>G</a>
                <a>H</a>
                <a>I</a>
                <a>J</a>
                <a>K</a>
                <a>L</a>
                <a>M</a>
                <a>N</a>
                <a>O</a>
                <a>P</a>
                <a>Q</a>
                <a>R</a>
                <a>S</a>
                <a>T</a>
                <a>U</a>
                <a>V</a>
                <a>W</a>
                <a>X</a>
                <a>Y</a>
                <a>Z</a>
            </div>
            <div class="mui-indexed-list-alert"></div>
            <div class="mui-indexed-list-inner">
                <div class="mui-indexed-list-empty-alert">没有数据</div>
                <!--热门品牌-->
                <div class="hotBrand">
                	<li v-for="hot in hotBrand" class="col-3 fordBrand mui-text-center" v-link="{name:'carTypeList',params:{cbId:hot.id,from:fromPage}}">
                        <img v-bind:src="hot.cbImg" alt="">
                        <p class="text2">{{hot.cbName}}</p>
                    </li>
                </div>
                <ul class="mui-table-view carBrand">
	                <template v-for="char in carBrand" >
	                    <li data-group="{{char.key}}" class="mui-table-view-divider mui-indexed-list-group">{{char.key}}</li>

	                    <li v-for="brand in char.list" data-value="ADI" data-tags="Audi" class="mui-table-view-cell mui-indexed-list-item" v-link="{name:'carTypeList',params:{cbId:brand.id}}">
	                        <img v-bind:src="brand.cbImg" alt="">
	                        <span>{{brand.cbName}}</span>
	                    </li>
	                </template>
                </ul>
            </div>
        </div>
    </div>
</template>
<style>
    /*搜索框*/
    .carBrandList .brand-search{height: 0.8rem;}
    /*标题*/
    .carBrandList .carBrand .mui-indexed-list-group{font-size: 0.4rem !important; line-height:0.7rem;}
    /*logo*/
    .carBrandList .carBrand li{vertical-align: middle;}
    .carBrandList .carBrand li img, .carBrandList .carBrand span{vertical-align: middle; }
    .carBrandList .carBrand span{font-size: .3rem !important; line-height: 0.5rem !important; color: #000!important; margin-left: 0.1rem;}
    .carBrandList .carBrand img{display:inline-block; width: 0.45rem; height: 0.45rem;}
    /*热门车型*/
    .carBrandList .hotBrand{padding-right: 30px; padding-top: 0.2rem; padding-bottom: 0.2rem; width: 100%; height: 3.2rem; background: #fff;}
    .carBrandList .hotBrand>li{display: inline-block;}
    .carBrandList .hotBrand>li>img{display: inline-block; width: 0.7rem; height: 0.7rem;}
</style>
<script type="text/ecmascript-6">
		import '../../fonts/mui.css';
        import iListComponent from '../../components/indexed-list/indexed-list.vue';
        import Page from '../../base/Page'
        import { API } from '../../config/constants'
        export default new Page({
            data(){
                return{
                	hotBrand:[],
                	carBrand:[],
                	fromPage:''
                }
            },
            ready () {
            	this.getJSON(API.GET_CARBRAND_LIST, {}, res => {
            		this.hotBrand = res.resultData.HOT;
            		this.carBrand = res.resultData.BRANDS;
                });
                mui.init({
                    swipeBack: false,
                });
                mui.ready(function() {
                    var header = document.querySelector('header.mui-bar');
                    var list = document.getElementById('list');
                    //calc hieght
                    var body=document.getElementsByTagName('body')[0];
                    body.style.height=(document.documentElement.clientHeight||document.body.clientHeight)+'px';
                    list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
                    //create
                    window.indexedList = new mui.IndexedList(list);
                });

                this.fromPage = this.$route.params.from;
            },
            components:{
                iListComponent,
            },
            methods: {

            }

    });

</script>
